<template>
  <el-form-item label="是否绑定公文" v-if="getFormtype().includes('document')">
    <el-switch v-model="optionModel.isDocument" @change="documentHandleChange"></el-switch>
  </el-form-item>
  <el-form-item label="公文元素" v-if="optionModel.isDocument">
    <el-select v-model="optionModel.documentName" filterable @change="updateWidgetNameAndRef"
      :title="i18nt('designer.setting.editNameHelp')" :filter-method="nameFilter">
      <el-option v-for="(sf, sfIdx) in serverFieldList" :key="sfIdx"
        :label="sf.elementName + '(' + sf.elementCode + ')'" :value="sf.elementCode"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item v-if="!selectedWidget.nameReadonly" :label="i18nt('designer.setting.keyNameEnabled')">
    <el-switch v-model="optionModel.keyNameEnabled" @change="handleChange"
      :disabled="optionModel.isDocument"></el-switch>
  </el-form-item>
</template>

<script>
import i18n from "@/utils/i18n"
import { isEmptyStr } from "@/utils/util"
import { getFormElementConfigList } from "@/api/document/number"
export default {
  name: "keyNameEnabled-editor",
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ['getFormtype'],
  computed: {
  },
  data() {
    return {
      serverFieldList: [],
      serverFieldListBack: [],
    }
  },
  mounted() {
    this.getFormConfigList()
  },
  methods: {
    async getFormConfigList() {
      const res = await getFormElementConfigList()
      if (res.ok) {
        this.serverFieldList = res.data
        this.serverFieldListBack = res.data
      }
    },
    handleChange(value) {
      if (value && !this.optionModel.keyName) {
        this.optionModel.keyName = this.optionModel.name
      }
    },

    documentHandleChange(value) {
      if (value) {
        this.optionModel.documentName = ""
        this.optionModel.keyName = ""
        this.optionModel.keyNameEnabled = false
      }
    },
    updateWidgetNameAndRef(newName) {
      let oldName = this.designer.selectedWidgetName
      if (isEmptyStr(newName)) {
        this.$message.info(this.i18nt('designer.hint.nameRequired'))
        return
      }

      if (!!this.designer.formWidget) {
        const formDomainData = JSON.parse(window.localStorage.getItem('widget__list__dataDomain')) || [] //数据域
        const nameFind = formDomainData.filter(item => item.options.keyName === newName).length > 0;
        if (!!nameFind) {
          this.selectedWidget.options.keyName = ""
          this.$message.info('公文字段已存在!')
          return
        }
        let newLabel = this.getLabelByFieldName(newName)
        this.selectedWidget.options.label = newLabel
        this.selectedWidget.options.keyName = newName
        this.selectedWidget.options.name = newName

      }
    },

    nameFilter(e) {
      this.serverFieldList = this.serverFieldListBack.filter(m => m.elementName.includes(e))
    },

    getLabelByFieldName(fieldName) {
      for (let i = 0; i < this.serverFieldList.length; i++) {
        if (this.serverFieldList[i].elementCode === fieldName) {
          return this.serverFieldList[i].elementName
        }
      }
      return null
    },

  },
}
</script>

<style scoped></style>
